import {Component, Input, EventEmitter} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
import {Output} from "@angular/core";
@Component({
    selector:"navigation-wheel",
    template:`
        <ul class="wheel">
            <li *ngFor="let mn of menus;let _index=index;" [attr.style]="listTrans(_index)">
                <a [attr.style]="linkTrans()" (click)="menuClick.emit(_index)">
                    <span [innerHTML]="sanitizer.bypassSecurityTrustHtml(mn.content)"></span>
                </a>
            </li>
        </ul>
    `,
    styleUrls:[
        'navigation.wheel.component.css'
    ]
})
export class NavigationWheelComponent{
    @Input() menus:any[]=[{}];
    gap=1;
    @Input() size=200;
    @Output() menuClick:EventEmitter<number>=new EventEmitter<number>();
    initScale=0.5;
    liRotate = -10;    //影响扇形的旋转位置
    constructor(private sanitizer: DomSanitizer){

    }

    listTrans(index:number){
        let objSkew =   360 / this.menus.length - this.gap;
        let liSkew = 90 - objSkew;
        let lir = this.liRotate + (360 / this.menus.length ) * index;
        let finalScale = 1.0 / this.initScale;
        return this.sanitizer.bypassSecurityTrustStyle(`
            width:${this.size/2}px;height:${this.size/2}px;
            transform:rotate(${lir}deg) skew(${liSkew}deg) scale(${finalScale});
            -webkit-transform:rotate(${lir}deg) skew(${liSkew}deg) scale(${finalScale});
            -ms-transform:rotate(${lir}deg) skew(${liSkew}deg) scale(${finalScale});
            -o-transform:rotate(${lir}deg) skew(${liSkew}deg) scale(${finalScale});
        `);
    }
    linkTrans(index:number){
        let objSkew =   360 / this.menus.length - this.gap;
        let aSkew = objSkew - 90;
        let aRotate =0 - ( (90 - objSkew) / 2 + 45);
        return this.sanitizer.bypassSecurityTrustStyle(`
            width:${this.size}px;height:${this.size}px;
            transform: skew(${aSkew}deg) rotate(${aRotate}deg)  scale(${this.initScale});
            -webkit-transform: skew(${aSkew}deg) rotate(${aRotate}deg)  scale(${this.initScale});
            -ms-transform:skew(${aSkew}deg) rotate(${aRotate}deg)  scale(${this.initScale});
            -o-transform:skew(${aSkew}deg) rotate(${aRotate}deg)  scale(${this.initScale});
        `);
    }
}
